<template>
  <view>
    <Search />
    <swiper
      class="swiper"
      indicator-dots
      autoplay
      circular
      indicator-active-color="#eb4450"
      interval="3000"
    >
      <swiper-item v-for="item in swiperData" :key="item.goods_id">
        <navigator :url="item.navigator_url" :open-type="item.open_type">
          <image :src="item.image_src" />
        </navigator>
      </swiper-item>
    </swiper>
    <view class="nav">
      <navigator
        :url="item.navigator_url"
        :open-type="item.open_type"
        hover-class="className"
        v-for="(item, index) in navData"
        :key="index"
      >
        <image :src="item.image_src" />
      </navigator>
    </view>
    <view class="floor" v-for="(item, index) in floorData" :key="index">
      <view class="floor_title">
        <image :src="item.floor_title.image_src" />
      </view>
      <view class="product_list">
        <navigator
          class="product_item"
          :url="item2.navigator_url"
          :open-type="item2.open_type"
          hover-class="none"
          v-for="(item2, index2) in item.product_list"
          :key="index2"
        >
          <image
            :src="item2.image_src"
            :style="'width:' + item2.image_width + 'rpx'"
          />
        </navigator>
      </view>
    </view>
  </view>
</template>

<script>
import Search from "@/components/Search";
import { getFloorData, getNavData, getSwiperData } from "@/api/index";
export default {
  components: {
    Search,
  },
  data() {
    return {
      swiperData: [],
      navData: [],
      floorData: [],
    };
  },
  onLoad() {
    this.getSwiperData();
    this.getNavData();
    this.getFloorData();
  },
  methods: {
    async getSwiperData() {
      const res = await getSwiperData();
      this.swiperData = res.data.message;
    },
    async getNavData() {
      const res = await getNavData();
      this.navData = res.data.message;
    },
    async getFloorData() {
      const res = await getFloorData();
      res.data.message.forEach((item) => {
        item.product_list.forEach((item2) => {
          item2.navigator_url = item2.navigator_url.replace("?", "/main?");
        });
      });
      this.floorData = res.data.message;
    },
  },
};
</script>

	
<style lang="less" scoped>
.swiper {
  height: 340rpx;
  image {
    width: 750rpx;
    height: 340rpx;
  }
}
.nav {
  display: flex;
  justify-content: space-evenly;
  margin: 12rpx 0 16rpx;
  image {
    width: 128rpx;
    height: 140rpx;
  }
}

.floor {
  margin-bottom: 10rpx;
  .floor_title {
    image {
      width: 750rpx;
      height: 59rpx;
      vertical-align: top;
    }
  }
  .product_list {
    overflow: hidden;
    .product_item {
      float: left;
      margin-left: 14rpx;
      margin-bottom: 13rpx;
      height: 188rpx;
      &:nth-child(1) {
        height: 386rpx;
      }
      image {
        height: 100%;
        vertical-align: top;
      }
    }
  }
}
</style>